<template>
  <div class="import">
    <el-card>
      <h4>员工导入</h4>
      <el-alert
        class="myalert"
        type="warning"
        title="每次导入仅可添加1000名员工，姓名、手机、入职时间、聘用形式为必填项"
        show-icon
      >
      </el-alert>
      <myexcel :beforeUpload="beforeUpload" :onSuccess="onSuccess"></myexcel>
    </el-card>
  </div>
</template>

<script>
import { importEmployeesApi } from "@/api/employees";
export default {
  methods: {
    // 上传之前触发
    beforeUpload(file) {
      // console.log(file);
      // 判断文件的大小：是否小于 2M
      // 内存单位的换算
      // 1024b = 1kb  1024kb = 1mb  1024mb = 1GB  1024GB = 1TB
      const isLess2M = file.size / 1024 / 1024 < 2;
      if (!isLess2M) {
        this.$message({
          type: "error",
          message: "文件大小不能超过2M",
        });
      }
      return isLess2M;
    },
    // 将天数转为具体的时间
    formatDate(day){
      // 转为时间戳
      const timeStemp = (day -1)*24*60*60*1000
      // 将时间戳转为具体时间
      const time = new Date(timeStemp)
      // 将年份减去70年
      // 01得到年份
      const year= time.getFullYear()
      // 02重新设置年份
      time.setFullYear(year - 70)
      // 返回时间
      return time
    },
    // 上传成功触发
    async onSuccess({ header, results }) {
      // console.log(results);
      // 将数据中的中文属性改为英文属性
      // 01 得到中文属性对应的英文属性
      let obj = {
        手机号: "mobile",
        姓名: "username",
        入职日期: "timeOfEntry",
        转正日期: "correctionTime",
        工号: "workNumber",
      };
     // 02 根据 obj 遍历 results，将所有的中文键改为英文键
      const data = results.map(item => {
        // 创建一个新的对象，用来保存英文键的对象
        const newObj = {}
        Object.keys(item).forEach(key => {
          // 得到中文 key 对应的英文
          const engKey = obj[key]
          // 判断当前的engKey是否是时间
          if (engKey === 'timeOfEntry' || engKey === 'correctionTime') {
            // 将天数数据转为具体的时间
            const time = this.formatDate(item[key])
            // 赋值时间
            newObj[engKey] = time
          } else {
             // 将 英文 添加到 newObj 中
          newObj[engKey] = item[key]
          }
         
        })
        return newObj
      })
      console.log(data);
      // 将数据提交到服务器
      await importEmployeesApi(data);
      // 提示成功
      this.$message({
        message: "批量导入成功",
        type: "success",
      });
      // 跳转到员工列表
      this.$router.push("/employees");
    },
  },
};
</script>

<style lang="scss">
.import {
  margin: 20px;
  h4 {
    text-align: center;
  }
  .myalert {
    margin-bottom: 40px;
  }
}
</style>
